<template>
  <div class="pay">
    <span>金额：</span>
    <span>￥{{payMoney}}</span>
    <button @click="wxPay">立即支付</button>
</div>
</template>

<script>
export default {
    data() {
        return {
            payMoney: 68,
            wxPayData: {}, //微信支付信息
            openid: '', //微信的openid(废弃)
            wxPayMessage: {}, //支付需要的参数
            userData: {}, //用户信息
            wxMessageData: {}, //微信的id等
            commentContent: '', //评论
            openId: '' //openid
        }
    },
    props: [
        'money',
        'activeIdPay',
        'payStatus',
        'supportData',
        'commentContentData',
        'activeUserId'
    ], //payStatus中0是直接支付，1是支持支付
    created() {
        // 微信设置
        this.utils.$get(this.utils.GET_WX_SET, data => {
            this.wxPayData = data.data
        })
        // 获取微信信息
        // this.$http.jsonp(this.utils.GET_WX_MESSAGE).then(data => {
        //     this.wxMessageData = data.data || {}
        // })
    },
    mounted() {
        this.payMoney = this.money
        // 获取用户信息
        this.utils.$get(this.utils.GET_USER_mESSAGE, data => {
            this.userData = data.data || {}
            if (this.payStatus == 0) {
                this.utils.$get(
                    this.utils.GET_CHIPS_DETAILS,
                    data => {
                        let activeData = data.data || {}
                        this.money = activeData.money
                        this.getPayData()
                    },
                    { id: this.$route.params.activeId }
                )
            }
        })
    },
    watch: {
        money(newVal) {
            this.payMoney = newVal
        },
        commentContentData(newVal) {
            this.commentContent = newVal
        }
    },
    methods: {
        // 获取微信支付的数据
        getPayData() {
            let userMessage = this.utils.cookie('get', 'user') || {}
            // 需要发送的数据
            if (!this.money) {
                return mui.toast('请输入金额')
            }
            // let unionid =
            //     this.wxMessageData.unionid || 'oO6YgxMvpIWjIefnPaFw4nNabDY4'
            // console.log(unionid, '微信用户id')
            let wxMessage = this.utils.cookie('get', 'wx_message')
            this.openId = this.utils.cookie('get', 'wx_message').unionid
            let orderForm = {
                orderFormTypeId: this.$route.params.activeId,
                orderFormType: 16,
                orderFormTotal: this.userData.orderTotal,
                orderFormPhone: this.userData.userTel,
                userName: this.userData.userName,
                orderType: 1,
                userUrl: this.userData.userUrl,
                userId: userMessage.userId,
                openid: this.openId,
                crowdUserId: userMessage.userId,
                orderFormMoney: this.money
            }
            // 获取订单
            this.utils.$post(
                this.utils.GET_ORDER_FORM,
                data => {
                    let orderFormNumber = data.data
                    // 将订单号传给父组件
                    this.$emit('getOrderForm', orderFormNumber)
                    //获取支付数据
                    this.utils.$get(
                        this.utils.GET_WX_PAY,
                        res => {
                            this.wxPayMessage = res.data || this.wxPayMessage
                        },
                        {
                            orderNumber: orderFormNumber.orderFormNumber,
                            type: 1,
                            openid: wxMessage.openid
                        }
                    )
                },
                orderForm
            )
        },
        // 发起微信支付
        wxPay() {
            if (!this.utils.browser.weixin) {
                // 非微信浏览器跳转链接
                mui.toast('请打开微信浏览器支付')
            }

            if (this.payStatus == 0) {
                // 直接支付报名
                let _this = this
                wx.chooseWXPay({
                    timestamp: _this.wxPayMessage.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: _this.wxPayMessage.noncestr, // 支付签名随机串，不长于 32 位
                    package: _this.wxPayMessage.prepayid, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: _this.wxPayMessage.sign, // 支付签名

                    success: function(res) {
                        // 支付成功后的回调函数
                        // this.utils.$post(this.utils.GET_PAY_DATA,conse => {

                        // })
                        mui.toast('支付成功')
                        if (_this.payStatus == 0) {
                            _this.$router.push({
                                path:
                                    '/users/chipl_message/' +
                                    _this.userData.identity +
                                    ',' +
                                    _this.activeIdPay
                            })
                        }
                    }
                })
            } else {
                // 支持支付
                let wxMessage = this.utils.cookie('get', 'wx_message') || {}
                this.openId = wxMessage.unionid
                //  支付金额不能大于总金额
                if (!this.money) {
                    return mui.toast('请输入金额')
                }
                if (!this.openId) {
                    return mui.toast('请进行微信授权……')
                }
                if (
                    this.money >
                    this.supportData.allMoney - this.supportData.nowMoney
                ) {
                    return mui.toast('支付金额不能大于总金额……')
                }
                let userMessage = this.utils.cookie('get', 'user') || {}
                // 需要发送的数据

                // let unionid =
                //     this.wxMessageData.unionid || 'oO6YgxMvpIWjIefnPaFw4nNabDY4'
                // console.log(unionid, '微信用户id')
                let orderForm = {
                    orderFormTypeId: this.activeUserId[1],
                    orderFormType: 16,
                    orderFormTotal: this.userData.orderTotal,
                    orderFormPhone: this.supportData.user.phone,
                    orderType: 1,
                    userName: this.userData.userName,
                    userUrl: this.userData.userUrl,
                    userId: this.activeUserId[0],
                    openid: this.openId,
                    crowdUserId: userMessage.userId,
                    orderFormMoney: this.payMoney
                }
                this.utils.$post(
                    this.utils.GET_ORDER_FORM,
                    data => {
                        let orderFormNumber = data.data || {}
                        //获取支付数据
                        this.utils.$get(
                            this.utils.GET_WX_PAY,
                            res => {
                                this.wxPayMessage =
                                    res.data || this.wxPayMessage
                                // 发起支付
                                let _this = this

                                wx.chooseWXPay({
                                    timestamp: _this.wxPayMessage.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                    nonceStr: _this.wxPayMessage.noncestr, // 支付签名随机串，不长于 32 位
                                    package: _this.wxPayMessage.prepayid, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                                    signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                    paySign: _this.wxPayMessage.sign, // 支付签名
                                    // 支付成功后的回调函数
                                    success: function(res) {
                                        // 支付完成需要发送的数据
                                        mui.toast('支持成功')
                                        if (!_this.commentContent.length) {
                                            _this.$router.push({
                                                path:
                                                    '/success_hint/' +
                                                    _this.activeIdPay[1]
                                            })
                                            return
                                        }
                                        if (
                                            _this.commentContent.length < 2 ||
                                            _this.commentContent.length > 200
                                        ) {
                                            return mui.toast('请输入正确的评论')
                                        }

                                        let paySuccessData = {
                                            activityId: _this.activeIdPay[1],
                                            crowdUserId: userMessage.userId,
                                            openid: _this.openId,
                                            userId: _this.activeUserId[0]
                                        }
                                        // 发送各种id给后台
                                        _this.utils.$get(
                                            _this.utils.SET_PAY_DATA,
                                            parameter => {
                                                mui.toast('支持成功1')
                                                let id = parameter.data || null
                                                let comment = {
                                                    id: parameter.data,
                                                    commentContent: this
                                                        .commentContentData,
                                                    type: 17
                                                }
                                                // 发送评论
                                                _this.utils.$post(
                                                    _this.utils.ADD_COMMENT,
                                                    comment => {
                                                        _this.$router.push({
                                                            path:
                                                                '/success_hint/' +
                                                                _this
                                                                    .activeIdPay[1]
                                                        })
                                                    },
                                                    comment
                                                )
                                            },
                                            paySuccessData
                                        )
                                    }
                                })
                            },
                            {
                                orderNumber: orderFormNumber.orderFormNumber,
                                type: 1,
                                openid: wxMessage.openid
                            }
                        )
                    },
                    orderForm
                )
            }
        }
    }
}
</script>


<style lang="less">
.pay {
    border-top: 1px solid #eee;
    padding-left: 0.24rem;
    height: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    > span {
        display: inline-block;
        line-height: 1rem;
        &:nth-child(2) {
            color: #f93a3a;
            font-weight: 600;
            font-size: 0.36rem;
        }
    }
    > button {
        border-radius: 0;
        float: right;
        width: 3.2rem;
        height: 100%;
        background-color: #00d8c9;
        text-align: center;
        font-size: 0.36rem;
        color: #fff;
    }
}
</style>
